<template>
  <div>
    <h1>修改学生</h1>
    学生姓名：<input type="text" v-model="changeData.name" /> <br />
    学生年龄：<input type="text" v-model="changeData.age" /> <br />
    学生性别： 男：
    <input type="radio" v-model="changeData.gender" value="男" />
    女：<input type="radio" v-model="changeData.gender" value="女" />
    <br />
    <button @click="clickChange">确认修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      changeData: {
        id: "",
        name: "",
        age: "",
        gender: ""
      }
    };
  },
  methods: {
    //   接收参数改变这边的数据
    getChangeData(data) {
      this.changeData = { ...data };
    },
    // 触发事件通知父组件修改数据
    clickChange() {
      this.$emit("change", this.changeData);
    }
  },
  mounted() {
    // 绑定自定义时间准备回调来接收触发事件传过来的参数
    this.$bus.$on("getChangeData", this.getChangeData);
  }
};
</script>

<style lang="scss" scoped></style>
